<template>
	<div>
		<button @click="sub(5)">-5</button>
		<span>{{ count }}</span>
		<button @click="add(5)">+5</button>
		<!-- <br />
		<button @click="sub">-</button>
		<span>{{ count }}</span>
		<button @click="add">+</button> -->
	</div>
</template>

<script>
export default {
	computed: {
		count() {
			return this.$store.state.num;
		},
	},
	methods: {
		sub(i) {
			this.$store.dispatch("deAction", i);
			// this.$store.commit("decrement", i);
		},
		// sub(i = 1) {
		// 	// 触发 store 中 mutation 下的方法,使用 store.commit()触发
		// 	if (typeof i === "object") {
		// 		this.$store.commit("decrement");
		// 	} else if (typeof i === "number") {
		// 		this.$store.commit("decrement", i);
		// 	}
		// },
		// add(i = 1) {
		// 	if (typeof i === "object") {
		// 		this.$store.commit("increment");
		// 	} else if (typeof i === "number") {
		// 		this.$store.commit("increment", i);
		// 	}
		// },
	},
};
</script>

<style scoped>
</style>